<template>
    <view class="page-account-bind">
        <view class="mx-4">
            <u-form borderBottom :label-width="150">
                <u-form-item label="手机号" borderBottom>
                    <u-input
                        v-model="form.mobile"
                        :border="false"
                        placeholder="请输入手机号码"
                    />
                </u-form-item>
                <u-form-item label="验证码" borderBottom>
                    <view class="flex">
                        <u-input
                            class="flex-1"
                            v-model="form.code"
                            placeholder="请输入验证码"
                            :border="false"
                        />
                        <view @click="sendSms">
                            <u-verification-code
                                ref="uCodeRef"
                                :seconds="60"
                                @change="codeChange"
                                change-text="x秒"
                            />
                            {{ codeTips }}
                        </view>
                    </view>
                </u-form-item>
            </u-form>
            <view class="mt-[40rpx]">
                <u-button class="btn-cyan-gradient" shape="circle" @click="handleConfirm"> 确定 </u-button>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
import { useAppStore } from '@/stores/app'
const uCodeRef = shallowRef()
const codeTips = ref('')

const appStore = useAppStore()
const codeChange = (text: string) => {
    codeTips.value = text
}

const form = reactive({
    type: 'bind',
    mobile: '',
    code: ''
})
const sendSms = () => {
    if(!proxy.$verify.mobile(form.mobile)){
        return false;
    }
    if (uCodeRef.value?.canGetCode) {
        proxy.$http('get', '/app/appmobile/'+ form.mobile, {}, (data,msg) => {
            uni.$u.toast('发送成功')
            uCodeRef.value?.start()
        })        
    }
}
const verifyForm = () => {
    if(!proxy.$verify.mobile(form.mobile)){
        return false;
    }
    if(!proxy.$verify.null(form.code, '请输入验证码')){
        return false;
    }
    return true;
}
const handleConfirm = () => {
    if (!verifyForm()){
        return;
    }
    proxy.$http('post', '/app/user/bindMobile', form, (data,msg) => {
        uni.$u.toast('绑定成功')
        setTimeout(() => {
            uni.navigateBack()
        }, 1000)
    });  
}
</script>

<style lang="scss">
page {
    height: 100%;
}
</style>
